<template>
  <div class="baseTable">
    <el-table
      :data="tableData"
      :height="height"
      :header-cell-style="{
        padding: '10px 0',
        color: 'rgb(0, 127, 235)',
        backgroundColor: '#f8f8f8',
      }"
      style="width: 100%"
      row-key="id"
      size="medium"
      :row-class-name="tableRowClassName"
      @selection-change="handleSelectionChange"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      >
      <el-table-column type="selection" width="55" v-if="isSelect">
      </el-table-column>
      <template v-for="(item, index) in tableColumn" :key="index">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :sortable="item.sort"
          :width="item.width"
          v-if="!item.hidden"
        >
          <template #default="scope">
            <span v-if="item.render">
              {{ item.render(scope.row, scope.$index) }}
            </span>
            <span v-else-if="item.formatter">
              <span v-html="item.formatter(scope.row, item)" />
            </span>
            <span v-else-if="item.columnType == 'slot'">
              <slot :name="item.slotName" :data="scope" />
            </span>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </template>
      <el-table-column
        v-if="tableOption"
        fixed="right"
        align="center"
        header-align="center"
        :label="tableOption.label"
        :width="tableOption.width"
      >
        <template #default="scope">
          <el-button
            v-for="btn in tableOption.buttons"
            :key="btn.name"
            :style="btn.style"
            :disabled="btn.disabled && btn.disabled(false)"
            :type="btn.type ? btn.type : 'text'"
            @click="handleButton(scope.row, btn.methods, scope.$index)"
          >
            {{ btn.name }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 是否调用分页 -->
    <div class="Page">
      <el-pagination
        v-if="isPage"
        background
        class="tablePage"
        layout="total, prev, pager, next,sizes, jumper"
        :page-size="Pagination.pageSize"
        :page-sizes="[10, 100, 200, 500]"
        :total="Pagination.total"
        :current-page="Pagination.pageNo"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: "BaseTable",
  props: {
    height: {
      type: Number,
      default: 500,
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    isSelect: {
      type: Boolean,
      default: false,
    },
    tableColumn: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableOption: {
      type: Object,
      default: () => {},
    },
    isPage: {
      type: Boolean,
      default: true,
    },
    Pagination: {
      type: Object,
      default: () => {
        return {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        };
      },
    },
  },
  setup(props, context) {
    const handleButton = (row, methods, index) => {
      context.emit("action", { row, methods, index });
    };
    const handleSizeChange = (val) => {
      context.emit("handleSizeChange", val);
    };
    const handleCurrentChange = (val) => {
      context.emit("handleCurrentChange", val);
    };

    const handleSelectionChange = (val) => {
      context.emit("handleSelectionChange", val);
    };

    const tableRowClassName = ({ row }) => {
      if (row.sendMsg && row.sendMsg == "无效的数据点！") {
        return "warning-row";
      }
      return "";
    };

    return {
      handleButton,
      handleSizeChange,
      handleCurrentChange,
      handleSelectionChange,
      tableRowClassName,
    };
  },
};
</script>
<style lang="less" scoped>
.baseTable {
  position: relative;
}
.Page {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -40px;
  z-index: 10;
}
</style>
<style lang="less">
.baseTable .el-table th {
  border-top: 1px solid rgb(235, 238, 245);
}

.el-table_fixed-right {
  height: 100% !important;
}
.el-table .warning-row {
  color: #f56c6c;
}
</style>
